<template>
 <div>
    <ckeditor 
      :value="content"
      :config="editorConfig"
      @input="onEditorInput">
    </ckeditor>
  </div>
</template>

<script>
import CKEditor from 'ckeditor4-vue';
import 'highlight.js/styles/darcula.css'

import { getToken } from "@/utils/auth";

export default {
  name: "CKEditor",
  components: {
    // 编辑器组件的局部注册方式
    ckeditor: CKEditor.component
  },
  model: {
    prop: "content",
    event: "updateContent"
  },
  props: {
    /* 编辑器的初始内容 */
    content: {
      type: String,
      default: "",
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: 400,
    }
  },
  data() {
    return {
      currentValue: this.content,
      editorConfig: {
        language: 'zh-cn',
        height: this.minHeight,
        // full 全能工具栏，basic 基础工具栏
        toolbar: 'Full',
        // emoji 表情，codesnippet 代码块，easyimage 图片上传简单化，image2 图片缩放
        extraPlugins: 'emoji,codesnippet,image2,uploadimage',
        image2_altRequired: false,
        // 上传的图片服务器地址
        filebrowserImageUploadUrl: process.env.VUE_APP_BASE_API + "/oss/oss/uploadImage?responseType=json",
        fileTools_requestHeaders: {
          Authorization: "Bearer " + getToken()
        }
      },
    }
  },
  methods: {
    onEditorInput(val) {
      console.log("$emit updateContent")
      this.$emit("contentChange", val);
    }
  },
  mounted () {
    console.log("富文本编辑器初始化")
  },
  // watch: {
  //   content: {
  //     handler(val) {
  //       // if (val !== this.value) {
  //         // console.log(val)
  //         this.currentValue = val
  //         this.$emit('contentChange', this.currentValue);
  //       // }
  //     }
  //   },
  //   currentValue: {
  //     handler(val) {
  //         // console.log(val)
  //       // if (val !== this.value) {
  //         this.currentValue = val
  //         this.$emit('contentChange', this.currentValue);
  //       // }
  //     }
  //   },
  // }
}

</script>
